import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';
import service from '../../api'
import { Toast, Form, Input, Button } from 'antd-mobile'
class Reg2 extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            message: '发送验证码',
            count: 60,
            isSend: false,
            values:{
                telcode:''
            }
        }
    }
    onFinish(values: any) {
        console.log(values)
        let tel = localStorage.getItem('tel')
        values.tel=tel
        service.user.doCheckcode(values).then(res=>{
            // console.log(res)
            if(res.data.code==='200'){
                Toast.show({
                    content:'验证成功,继续注册'
                })
                this.props.history.push('/register/reg3')
            }
            else{
                Toast.show({
                    content:res.data.message
                })
            }
        })
    }
    sendCode() {

        this.setState({
            isSend: true
        })
        let tel = localStorage.getItem('tel')
        service.user.doSendmsgcode({ tel }).then(res => {
            console.log(res);
            Toast.show({
                content:res.data.message
            })
            this.setState({
                values:{
                    telcode:res.data.data
                }
            },()=>{
                console.log(this.state.values)
            })
        })
        let timer = setInterval(() => {
            this.setState({
                count: this.state.count - 1
            }, () => {
                if (this.state.count <= 0) {
                    clearInterval(timer)
                    this.setState({
                        isSend: false,
                        message: '重新发送验证码',
                        count: 60,
                    })
                }
            })
        }, 1000)

    }
    render() {
        return (
            <div>
                <Form layout='horizontal'
                    // mode='card'
                    initialValues={this.state.values}
                    onFinish={this.onFinish.bind(this)}
                    footer={
                        <Button block type='submit'  shape='rounded' color='danger' size='large'>
                            验证验证码
                        </Button>
                    }
                >
                    <Form.Item label=''  validateFirst name='telcode'
                        extra={
                            <div>
                                <Button block={false} disabled={this.state.isSend} color='danger' size='middle' onClick={() => { this.sendCode() }}>
                                    {this.state.isSend ? this.state.count : this.state.message}
                                </Button>
                            </div>
                        }
                        rules={[{ required: true, message: '请输入验证码' }]}>
                        <Input placeholder='请输入验证码'  clearable />
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default withRouter(Reg2);